<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>佳乐的窝</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    </style>
</head>

<body>
    <div class="container">
        <div class=" row page-header">
            <h1>售药机管理系统<small>Beta</small></h1>
        </div>
        <div class="row">
            <ul class="nav nav-tabs nav-justified">
                <li><a href="/">全览</a></li>
                <li class="active"><a href="/drug">药品管理</a></li>
                <li><a href="/build">流水管理</a></li>
                <li><a href="/build">机器管理</a></li>
                <li><a href="/build">账号管理</a></li>
            </ul>
        </div>
        <div class="row">
            <h2></h2>
        </div>
        <div class="row">
            <div class="btn-group right" style="float: right;">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加药品</button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#findModal">查找药品</button>
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">删除药品</button>
              </div>
        </div>
        <div class="row">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>药品id</th>
                        <th>药品名称</th>
                        <th>药品等级</th>
                        <th>售价</th>
                        <th>是否售卖</th>
                    </tr>
                </thead>
                <tbody>
                    {% for i in list %}
                    <tr class="active">
                        <td>{{ i[0] }}</td>
                        <td>{{ i[1] }}</td>
                        <td>{{ i[2] }}</td>
                        <td>{{ i[3] }}</td>
                        <td>{{ i[4] }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <script>
        function  fun(){
            var data = {drug_id:document.getElementById('drug_id').value,drug_name:document.getElementById('drug_name').value,drug_level:document.getElementById('drug_level').value,drug_sell:document.getElementById('drug_sell').value,enable:document.getElementById('enable').value}
            var url = "/recive";  //设置请求的地址
            var xhr = new XMLHttpRequest();  //实例化XMLHttpRequest 对象
            xhr.open("POST", url, false);  //设置请求方式
            xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded');  //设置为表单方式提交
            xhr.send(JSON.stringify(data));  //发送请求
            data=xhr.responseText;
            document.write(data);  //接收数据
          }
        </script>
        <div class="row">
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" 
                                    aria-hidden="true">
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                添加药品
                            </h4>
                        </div>
                        <div class="modal-body">
                            <form role="form" method="post">
                                <div class="form-group">
                                  <label for="name">药品id</label>
                                  <input type="text" id="drug_id" class="form-control" placeholder="文本输入">
                                  <label for="name">药品名称</label>
                                  <input type="text" id="drug_name" class="form-control" placeholder="文本输入">
                                  <label for="name">药品等级</label>
                                  <input type="text" id="drug_level" class="form-control" placeholder="文本输入">
                                  <label for="name">药品售价</label>
                                  <input type="text" id="drug_sell" class="form-control" placeholder="文本输入">
                                  <label>
                                    <input type="checkbox" id="enable">是否售卖(选中为是)
                                  </label>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" 
                                    data-dismiss="modal">关闭
                            </button>
                            <button onclick="fun()" class="btn btn-default">上传</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        </div>
        <div class="row">
            <div class="modal fade" id="findModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" 
                                    aria-hidden="true">
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                查找药品
                            </h4>
                        </div>
                        <div class="modal-body">
                            <form role="form" method="post">
                                <div class="form-group">
                                  <label for="name">药品id</label>
                                  <input type="text" id="drug_id" class="form-control" placeholder="文本输入">
                                  <button onclick="fun()" class="btn btn-default">查询</button>
                                  <label for="name">药品名称</label>
                                  <input type="text" id="drug_name" class="form-control" placeholder="文本输入">
                                  <button onclick="fun()" class="btn btn-default">查询</button>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" 
                                    data-dismiss="modal">关闭
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        </div>
    </div>
</body>
</html>